<template>
  <div>
    当前用户：{{ user.username }}
    <el-button @click="logout" type="success">logout</el-button>
    <el-row>
      合作商名称：
      <el-input v-model="search.key" placeholder="合作商名称" style="width: 200px"></el-input>
      所属大区：
      <el-select v-model="search.coarea" placeholder="所属大区">
        <el-option v-for="area in areas" :key="area.id" :label="area.name" :value="area.id"></el-option>
      </el-select>
    </el-row>
    <el-row>
      添加时间范围：
      <el-date-picker v-model="search.createda" placeholder="开始时间" style="width: 200px"></el-date-picker>
      -
      <el-date-picker v-model="search.createdb" placeholder="截至时间" style="width: 200px"></el-date-picker>
      营业范围：
      <el-select v-model="search.coscope" placeholder="营业范围">
        <el-option v-for="scope in scopes" :key="scope.id" :label="scope.name" :value="scope.id"></el-option>
      </el-select>
    </el-row>
    <el-button type="success" @click="list">查询</el-button>
    <el-button type="success" @click="delAll">批量删除</el-button>
    <el-button type="success" @click="save">添加</el-button>
    <el-button type="success" @click="reverseCheck">反选</el-button>
    <el-button type="success" @click="allCheck">全选</el-button>
    <el-button type="success" @click="unCheck">全不选</el-button>
    <el-button @click="dialogVisible=true">上传文件</el-button>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="id" label="id" width="110"></el-table-column>
      <el-table-column prop="name" label="姓名" width="110"></el-table-column>
      <el-table-column label="合作类型" width="110">
        <template slot-scope="scope">
          {{ scope.row.cotype === 1 ? '销售' : '采购' }}
        </template>
      </el-table-column>
      <el-table-column prop="courl" label="网址" width="150"></el-table-column>
      <el-table-column prop="bname" label="营业范围" width="110"></el-table-column>
      <el-table-column prop="created" label="添加时间" width="110"></el-table-column>
      <el-table-column prop="status" label="状态" width="110">
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? '草稿' : scope.row.status === 2 ? '驳回' : scope.row.status === 3 ? '通过' : '待审' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button @click="amend(scope.row.id)" type="info">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改信息" :visible.sync="dialogTableVisible">
      <el-form :model="form" label-width="80px">
        <el-form-item label="编号">
          <el-input v-model="form.cono" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.name" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="合作类型">
          <el-radio-group v-model="form.cotype">
            <el-radio :label="1">销售</el-radio>
            <el-radio :label="2">采购</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="网址">
          <el-input type="url" v-model="form.courl" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="营业范围">
          <el-select v-model="form.coscope" placeholder="营业范围">
            <el-option v-for="scope in scopes" :key="scope.id" :label="scope.name" :value="scope.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合作时间">
          <el-date-picker v-model="form.costart" style="width: 200px;"></el-date-picker>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="所属大区">
          <el-select v-model="form.coarea" placeholder="所属大区">
            <el-option v-for="area in areas" :key="area.id" :label="area.name" :value="area.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.telphone" style="width: 200px;"></el-input>
        </el-form-item>
        <el-button type="primary" @click="upSave">完成</el-button>
      </el-form>
    </el-dialog>
    <div class="block">
      <span class="demonstration">显示总数</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="search.page"
        :page-size="search.pageSize"
        layout="total, prev, pager, next"
        :total="search.total">
      </el-pagination>
    </div>
    <el-dialog
      title="上传excel文件"
      :visible.sync="dialogVisible"
      width="30%">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="http://localhost:8080/file/upload2"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ListView',
  data () {
    return {
      // 登录信息
      user: {
        username: ''
      },
      // 查询条件
      search: {
        page: 1,
        pageSize: 3,
        key: '',
        total: 0,
        coarea: null,
        coscope: null,
        createda: '',
        createdb: ''
      },
      tableData: [], // 列表
      selected: [], // 选中的 行数据
      areas: [], // 地区 下拉框
      scopes: [], // 范围 下拉框
      dialogTableVisible: false, // 修改的对话框
      form: {}, // 回显对象
      dialogVisible: false // 上传文件
    }
  },
  // 钩子函数
  created () {
    this.user = this.$store.state.user
    this.list()
    // 范围下拉框
    this.axios.get('/dic/dicList', { params: { type: 1 } }).then(res => {
      this.scopes = res.data.jdata
    })
    // 地区下拉框
    this.axios.get('/dic/dicList', { params: { type: 2 } }).then(res => {
      this.areas = res.data.jdata
    })
  },
  methods: {
    submitUpload () {
      this.$refs.upload.submit()
    },
    // 更新 提交数据
    upSave () {
      this.axios.post('/cop/upSave', this.form).then(res => {
        if (res.data.code === 200) {
          this.$message.success('更新成功')
          this.dialogTableVisible = false
          this.list()
        } else if (res.data.code === 909) {
          this.$message.error('no')
        }
      })
    },
    // 显示对话框 回显
    amend (id) {
      this.dialogTableVisible = true
      alert(id)
      this.axios.get('/cop/getCop', { params: { id: id } }).then(res => {
        this.form = res.data.jdata
        this.$message.success('ok')
      })
    },
    // 跳转 添加页面
    save () {
      this.$router.push('/save')
    },
    // 批量删除
    delAll () {
      const ids = this.tableData.map(x => {
        return x.id
      })
      if (confirm('确定删除' + ids + '吗')) {
        this.axios.get('/cop/delAll?ids=' + ids).then(res => {
          this.$message.success('删除成功')
          this.search.page = 1
          this.list()
        })
      }
    },
    unCheck () {
      this.$refs.multipleTable.clearSelection()
    },
    // 全选
    allCheck () {
      this.tableData.forEach(x => {
        this.$refs.multipleTable.toggleRowSelection(x, true)
      })
    },
    // 反选
    reverseCheck () {
      this.tableData.forEach(x => {
        this.$refs.multipleTable.toggleRowSelection(x)
      })
    },
    handleCurrentChange (val) {
      this.search.page = val
      this.list()
    },
    handleSizeChange (val) {
      this.search.pageSize = val
      this.list()
    },
    // 选中行
    handleSelectionChange (val) {
      this.selected = val
    },
    // 列表
    list () {
      this.axios.post('/copvo/list', this.search).then(res => {
        this.tableData = res.data.jdata.records
        this.search.page = res.data.jdata.current
        this.search.pageSize = res.data.jdata.size
        this.search.total = res.data.jdata.total
      })
    },
    // 登出
    logout () {
      this.$store.commit('setUser', {})
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>

</style>
